<template>
  <div class="home">
    <button @click="muns">-</button>{{count}}<button @click="increment">+</button>

    <div>
      创建时间 {{$store.getters.formateTime}} - {{$store.getters.formateTime}}
      <button @click="change">修改时间</button>
    </div>

    <br>
    <br>    
    <div>
      <button @click="getData">获取主题数据</button>
      <ul>
        <li v-for="item in topics" :key="item.id">{{item.title}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { useStore } from 'vuex'
import { ref, computed } from 'vue'
export default {
  name: 'Home',
  // data() {
  //   return {
  //     num: 0
  //   }
  // }
  setup() {
    let store = useStore()
    // computed的到的数据是只读的 也就是说得到的数据不能手动进行更改
    let count = computed(() => store.state.count) 
    // const num = ref(0) // ref是声明响应式数据的方法 他其实是一个proxy对象
    // console.log(num);
    // console.log(count);
    return {
      count,
      muns() {
        // commit 提交mutation的方法
        store.commit('mnus')
      },
      topics: computed(() => store.state.topics),
      increment() {
        // 2就是increment的载荷
        // 一个mutation一次只能提交一个载荷 载荷的数据可以是任意数据类型
        store.commit('increment', {value1: 2, value2: 3})
      },

      change() {
        store.commit('changeTime')
      },

      getData() {
        // dispatch 触发action函数的方法
        store.dispatch('getTopics')
      }
    }
  }
}
</script>
